<script setup>
import { RouterLink, RouterView } from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
  <div class="app-container">
    <!-- 导航栏 -->
    <header class="header">
      <nav class="nav-container">
        <div class="logo">
          <img
            src="https://b0.bdstatic.com/0a3e2a9c52915b90a3235ba43f08b155.jpg@h_1280"
            alt="Logo"
          />
        </div>
        <div class="nav-links">
          <router-link to="/" class="nav-item">首页</router-link>
          <router-link to="/cart" class="nav-item">
            <el-badge :value="cartCount" :hidden="!cartCount">
              购物车
            </el-badge>
          </router-link>
          <router-link to="/orders" class="nav-item">我的订单</router-link>
          <router-link to="/profile" class="nav-item">个人中心</router-link>
          <router-link to="/login" class="nav-item">登录</router-link>
          <router-link to="/register" class="nav-item">注册</router-link>
        </div>
      </nav>
    </header>

    <!-- 路由视图 -->
    <main class="main-content">
      <router-view></router-view>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
      <p>&copy; 2024 您的网站名称. All rights reserved.</p>
    </footer>
  </div>
</template>

<style scoped>
.app-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 40px;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-item:hover {
  color: #409eff;
}

.main-content {
  flex: 1;
  margin-top: 72px;
  padding: 2rem;
}

.footer {
  background-color: #f5f5f5;
  padding: 1rem;
  text-align: center;
  color: #666;
}
</style>
